<!--
 * @Author: hifishroom
 * @Date: 2021-08-14 16:09:33
 * @LastEditTime: 2021-08-18 15:36:29
 * @FilePath: \index\src\components\common\swiper\Slides.vue
-->
<template>
  <div class="slides">
    <swiper class="swiper-container" :options="swiperOption">
      <swiper-slide v-for="(items, index) in imgs" :key="index">
        <img :src="items.imageUrl" alt="" class="s-img" />
      </swiper-slide>
      <div class="swiper-pagination " slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  name: "Slides",
  props: {
    imgs: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      swiperOption: {
        notNextTick: true,
        //循环
        loop: true,
        //设定初始化时slide的索引
        initialSlide: 0,
        //自动播放
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        // 设置轮播
        effect: "flip",
        //滑动速度
        speed: 800,
        //滑动方向
        direction: "horizontal",
        paginationClickable: true,
        //小手掌抓取滑动
        grabCursor: true,
        //滑动之后回调函数
        on: {
          slideChangeTransitionEnd: function() {
            // console.log(this.activeIndex);//切换结束时，告诉我现在是第几个slide
          }
        },
        //分页器设置
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
          bulletClass: "index-lot", //需设置.my-bullet样式
          bulletActiveClass: "index-lot-active"
        }
      }
    };
  }
};
</script>

<style lang="scss">
.s-img {
  width: 100%;
  height: 210px;
}

.index-lot {
  width: 13px;
  height: 3px;
  margin-right: 3px;
  display: inline-block;
  border-radius: 5px;
  background: #000;
  opacity: 0.2;
}

.index-lot-active {
  background-color: #fff;
  opacity: 1;
}
</style>
